<template>
    <div id="Params">
        <my-breadcrumb/>
        <el-row class="main">
            <el-col :span="24">
                 <el-alert
                    title="注意：只允许为第三级分类设置相关参数"
                    type="warning"
                    show-icon></el-alert>
            </el-col>
            <el-col :span="10">
                 <el-form ref="form" :model="form" label-width="100px" style="margin:20px 0">
                    <el-form-item label="选择商品分类:">
                         <goods-cat />
                    </el-form-item>
                 </el-form>
            </el-col>
            <el-col :span='24'>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <!--动态参数  -->
                   <el-tab-pane label="动态参数" name="many">
                        <el-button :disabled='isDisabled' size="mini" type="primary" style="margin-bottom:10px" 
                          @click="handlyAddMany">添加参数</el-button>
                        <!-- 添加动态参数 -->
                        <my-dialog :btnOption='btnOption.addMany' 
                            :isShow.sync='addManyIsshow'/> 
                        <!-- 表格 -->
                        <my-table-one :tableOptions='tableOptions' :tableData='tableData'>
                            <template #option='scope'>
                                <div>
                                    <!-- 编辑动态参数 -->
                                    <el-button type="primary" icon="el-icon-edit" size="mini"
                                         @click="handlyEdit(scope.slotData)">修改</el-button>
                                    <my-dialog :btnOption='btnOption.editMany' 
                                        :isShow.sync='editManyIsshow'/> 
                                     <!-- 删除 -->
                                    <el-button class="margin-left-10" type="danger" icon="el-icon-delete" size="mini" 
                                        @click="handlyDelete(scope.slotData)">删除</el-button>
                                </div>
                            </template>
                            <template #treeTagsTwo='scope'>
                                <div>
                                    <tree-tags-two :slotData='scope.slotData' :attr_sel='"many"'/>
                                </div>
                            </template>     
                        </my-table-one>                      
                   </el-tab-pane>
                   <!-- 静态属性 -->
                   <el-tab-pane label="静态属性" name="only">
                       <!-- 添加属性 -->
                        <el-button :disabled='isDisabled' size="mini" type="primary" style="margin-bottom:10px" @click="handlyAddOnly">添加属性</el-button>
                        <my-dialog :btnOption='btnOption.addOnly' 
                                        :isShow.sync='addOnlyIsshow'/> 
                        <my-table-one :tableOptions='tableOptions' :tableData='tableData' :attr_sel='"only"'>
                            <template #treeTagsTwo='scope'>
                                <div>
                                    <tree-tags-two :slotData='scope.slotData' :attr_sel='"only"'/>
                                </div>
                            </template>
                        </my-table-one> 
                   </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import {myMesBoxPop} from '@/utils/comm' 
import { Message } from 'element-ui';
export default {
    name:'Params',
    data() {
        return {
            form:{
               name:'' 
            },
            activeName:'many',
            isDisabled:true,
            tableOptions:[
                {prop:'attr_name',label:'参数名称',width:'200'},
                {prop:'email',label:'操作',width:'200',slot:'option'},
                {prop:'children',label:'',width:'200',type:'expand',slot:'treeTagsTwo'},
            ],
            tableData: [],
            btnOption:{
                addMany:{
                    txt:'添加动态参数',
                },
                addOnly:{
                    txt:'添加静态属性',
                },
                editMany:{
                    txt:'编辑动态参数',
                }
            },
            //编辑动态参数
            editManyIsshow:false,
            //添加静态属性
            addOnlyIsshow:false,
            //添加动态参数
            addManyIsshow:false,
        }
    },
    methods: {
        //封装获取列表
        getCategoriesAttributes(activeName){
            let good_cat=this.$store.getters['goods/get_good_cat_length'];
            let id=Number(good_cat[good_cat.length-1]);
            let data={id,sel:activeName};
            this.$store.dispatch('categorie/Acs_getCategoriesAttributes',data)
            .then(res=>{
                //console.log(res);
                this.tableData=res; 
                this.$store.commit('goods/CHANGE_PARAMS_DATA',res)
            })
            .catch(err=>console.log(err))
        },
        //切换tab栏
        handleClick(){
            if(!this.isDisabled){
               if(this.activeName==='many'){
                this.getCategoriesAttributes('many')
               
               }
               if (this.activeName==='only') {
                  this.getCategoriesAttributes('only')
               }

            }
        },
        //添加动态参数
        handlyAddMany(){
            this.addManyIsshow=true;
        },
        //编辑动态参数
        handlyEdit(row){
            this.editManyIsshow=true;
            this.$store.commit('goods/CHANGE_CURRENTROW',row)
        },
        //删除动态参数
        handlyDelete(row){
            myMesBoxPop(()=>{
                return new Promise((resolve,reject)=>{
                    let data={
                        id:row.cat_id,
                        attrId:row.attr_id}
                        //console.log(data);
                        this.$store.dispatch('categorie/Acs_deleteCategories',data).then(res=>{
                        this.getCategoriesAttributes('many')
                        resolve(res)
                })
                        
            })},()=>{
                Message.info('已取消删除')
            },'此操作将永久删除该参数, 是否继续?')
        },
        //添加静态属性
        handlyAddOnly(){
            this.addOnlyIsshow=true;
        },

        
    },
    watch:{
        '$store.state.goods.addGoodsQuery.goods_cat':{
            handler:function(newVal,oldVal){
                //console.log('当前newVal',newVal);
                if(newVal.length===0||newVal.split(',').length<3){
                    this.isDisabled=true
                }else{
                    this.isDisabled=false
                    if(this.activeName==='many'){
                        this.getCategoriesAttributes('many')
                    }
                    if (this.activeName==='only') {
                        this.getCategoriesAttributes('only')
                    }
                } 
            },
            deep:true,
        },
        '$store.state.goods.params_data':{
            handler:function(newVal,oldVal){
                //console.log('变化',newVal);
                this.tableData=newVal
            },
            deep:true,
        }, 
    }
}
</script>
<style lang="scss" scoped>
    #Params{
        .main{
            margin-top: 15px;
            background: #fff;
            padding: 20px;
        }
    }
</style>